const musicContainer = document.getElementById('music-container');
const playBtn = document.getElementById('play');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');

const audio = document.getElementById('audio');
const progress = document.getElementById('progress');
const progressContainer = document.getElementById('progress-container');
const title = document.getElementById('title');
const cover = document.getElementById('cover');

//歌名
const songs = ['Call Me a Fool', '勇', 'Close To You'];

//歌曲索引
let songIndex = 2;

// 初次加载歌曲到.DOM
loadSong(songs[songIndex]);

//更新歌曲信息
function loadSong(song){
    title.innerText = song;
    audio.src = `music/${song}.ogg`;
    cover.src =`images/${song}.jpg`;
    }
 
    //
    function playSong() {
    musicContainer.classList.add('play');
    playBtn.querySelector('i.fas').classList.remove('fa-play');
    playBtn.querySelector('i.fas').classList.add('fa-pause');
    
    audio.play();
    }
    
    //暂停歌曲
    function pauseSong(){
    musicContainer.classList.remove('play');
    playBtn.querySelector('i.fas').classList.add('fa-play');
    playBtn.querySelector('i.fas').classList.remove('fa-pause');
    
    audio.pause();
    }
    
    //上一首歌曲
    function prevSong(){
    songIndex--;
    
    if (songIndex < 0) {
    songIndex = songs.length - 1;
    }
    
    loadSong(songs[songIndex]);
    
    playSong();
    }
    
    //
    function nextSong() {
        songIndex++;
    
        if(songIndex > songs.length -1){
        songIndex = 0;
        }
    
        loadSong(songs[songIndex]);
    
        playSong();
    }
    
    //更新进度条
    function updateProgress(e){
    const { duration, currentTime } = e.srcElement;
    const progressPercent = (currentTime / duration) * 100;
    progress.style.width = `${progressPercent}%`;
    }
    
    //设置进度条
    function setProgress(e){
        const width = this.clientWidth;
        const clickX = e.offsetX;
        const duration = audio.duration;
        
        audio.currentTime = (clickX / width)*duration;
        }
    
    //事件监听器
    playBtn.addEventListener('click',function(){
    const isPlaying = musicContainer.classList.contains('play');
    
    if (isPlaying){
    pauseSong();
    }else {
    playSong();
    }
    });

//改变歌曲
prevBtn.addEventListener('click',prevSong);
nextBtn.addEventListener('click',nextSong);

//时间/歌曲 update
audio.addEventListener('timeupdate',updateProgress);

//在进度条上点击
progressContainer.addEventListener('click', setProgress);

//歌曲结束
audio.addEventListener('ended', nextSong);